<template>
	<view class="mallMiaosha">
		<page-head ref="pageHead" :title="'森歌微商城-秒杀抢购'" :headtype="2"></page-head>
		<view class="con">
			<view class="qgMain">
				<view class="m-top">
					<!-- <image class="qgIcon" src="/static/image/qgIcon.png"/> -->
					<view class="m-txt">
						<text class="m-txt1">限时抢购</text>
						<text class="m-txt2">爆款立抢</text>
					</view>
				</view>
				<view class="m-bottom">
					<view class="m-list clearfix">
						<view class="m-l-box">
							<view class="m-item" v-for="item in mainList">
								<view style="position: relative;">
									<image class="m-qgImg" src="/static/image/integralIcon4.png"/>
									<view class="qgPercent">
										<view class="m-sall">已售83%</view>
										<!-- <image class="m-qgFire" src="/static/image/qgFire.png"/> -->
										<!-- <image class="m-qgPercent" src="/static/image/qgPercent.png"/> -->
									</view>
								</view>
								<view class="m-gname ellipsis">森歌集成灶 超级魔方</view>
								<view class="m-gprice"><text style="font-size: 15rpx;">￥</text>2376.00</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="qgList">
				<view class="qgConBtn clearfix">
					<view class="c-btn-item fl" @click="changeType(1)">
						<!-- <image v-if="type==1" class="qgActive" src="/static/image/qgActive.png"/> -->
						<view :class="type==1?'qg-l-txt txtOn':'qg-l-txt'">10:00抢购中</view>
					</view>
					<view class="c-btn-item fl" @click="changeType(2)">
						<!-- <image v-if="type==2" class="qgActive" src="/static/image/qgActive.png"/> -->
						<view :class="type==2?'qg-l-txt txtOn':'qg-l-txt'">10:00抢购中</view>
					</view>
					<view class="c-btn-item fl" style="margin-right: 0;" @click="changeType(3)">
						<!-- <image v-if="type==3" class="qgActive" src="/static/image/qgActive.png"/> -->
						<view :class="type==3?'qg-l-txt txtOn':'qg-l-txt'">10:00抢购中</view>
					</view>
				</view>
				<view class="listBox">
					<view class="listItem" v-for="item in qgList">
						<view style="padding: 0 20rpx;">
							<view class="l-discount">
								<!-- <image class="qgDiscount" src="/static/image/qgDiscount.png"/> -->
								<view class="discountTxt">6<text style="font-size: 16rpx;">.88</text><text style="font-size: 22rpx;">折</text></view>
							</view>
							<view class="goodsInfo clearfix">
								<view class="fl"><image class="l-qgImg" src="/static/image/integralIcon4.png"/></view>
								<view class="fl goods-i">
									<view class="l-gname ellipsis">二星级母婴消毒集成灶一体灶 </view>
									<view class="l-gtag">家用消毒柜集成灶 | 天然气左排烟 </view>
									<view class="l-qgPercent">
										<view class="l-percent"></view>
										<view class="m-sall">仅剩2台</view>
									</view>
									<view class="l-time">限时抢</view>
									<view class="l-bottom">
										<view class="fl">
											<view class="l-price"><text style="font-size: 24rpx;">￥</text>230.00</view>
											<view class="l-disprice">￥580.00</view>
										</view>
										<view class="l-qgBtn fr">马上抢</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lookMore">~下拉显示更多~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainList:[1,1,1],
				type:1,
				qgList:[1,1,1,1,1]
			}
		},
		onLoad() {
			this.$refs.pageHead.getTopHeight()
			
		},
		methods: {
			changeType(type){
				this.type=type
			}
		}
	}
</script>

<style scoped>
    @import './mall.css';
</style>
